<template>
  <view>
    <template>
      <view class="custom-title title-box">商品类型</view>
      <view class="class-content clearfix">
        <view
          :class="queryParams.productType.stockFilter == 1 ? 'class-item-select class-item uni-ellipsis-1' : 'class-item uni-ellipsis-1'"
          @click="selectProductTypeFn('stockFilter')"
        >
          现货
        </view>
        <view
          :class="queryParams.productType.promotionFilter == 1 ? 'class-item-select class-item uni-ellipsis-1' : 'class-item uni-ellipsis-1'"
          @click="selectProductTypeFn('promotionFilter')"
        >
          促销
        </view>
        <!--        <view
          :class="queryParams.productType.productTagFilter == 1 ? 'class-item-select class-item uni-ellipsis-1' : 'class-item uni-ellipsis-1'"
          @click="selectProductTypeFn('productTagFilter')"
        >
          定制商品
        </view>-->
      </view>
    </template>
    <template>
      <view class="custom-title title-box">价格区间</view>
      <view class="class-content price-box clearfix">
        <input
          v-model="queryParams.priceStart"
          class="price-inp"
          placeholder="最低价"
          type="number"
          maxlength="9"
          @input="inputReplaceFn('priceStart')"
          @paste="inputReplaceFn('priceStart')"
        >
        <view class="line" />
        <input
          v-model="queryParams.priceEnd"
          class="price-inp"
          placeholder="最高价"
          type="number"
          maxlength="9"
          @input="inputReplaceFn('priceEnd')"
          @paste="inputReplaceFn('priceStart')"
        >
      </view>
    </template>
    <template v-if="sortBrandList.length > 0 && pageType!='brand'">
      <view class="title-box">
        <view class="custom-title posit-title">品牌</view>
        <view
          class="posit-box"
        >
          <view
            class="city-name selected-box"
          >
            {{ queryParams.listBrandNames.join(',') }}
          </view>
          <text
            v-if="sortBrandList.length > 3"
            class="icon-goto font_family icon-a-arrowdown_tongyong_1"
            @click="changeIndexListFn('brandIndexList')"
          />
        </view>
      </view>
      <view class="class-content clearfix">
        <template
          v-for="(brandItem, brandIndex) in sortBrandList"
        >
          <view
            v-if="brandIndex < 9"
            :key="brandIndex"
            :class="queryParams.listBrandIds.indexOf(brandItem.brandId) > -1 ? 'class-item-select class-item uni-ellipsis-1' : 'class-item uni-ellipsis-1'"
            @click="selectBrandFn(brandItem);"
          >
            {{ brandItem.brandName }}
          </view>
        </template>
      </view>
    </template>
    <template v-if="listCategorys.length > 0">
      <view class="title-box">
        <view class="custom-title posit-title">分类</view>
        <view
          class="posit-box"
        >
          <view
            class="city-name"
          >
            {{ queryParams.listCategorys.categoryName || '' }}
          </view>
          <text
            v-if="listCategorys.length > 3"
            class="icon-goto font_family icon-a-arrowdown_tongyong_1"
            @click="changeIndexListFn('categoryIndexList')"
          />
        </view>
      </view>
      <view class="class-content clearfix">
        <template
          v-for="(categoryItem,categoryIndex) in listCategorys"
        >
          <view
            v-if="categoryIndex < 9"
            :key="categoryIndex"
            :class="queryParams.listCategoryId == categoryItem.categoryId ? 'class-item-select class-item uni-ellipsis-1' : 'class-item uni-ellipsis-1'"
            @click="selectCategoryFn(categoryItem)"
          >
            {{ categoryItem.categoryName }}
          </view>
        </template>
      </view>
    </template>
    <view class="title-box">
      <view class="custom-title posit-title">配送至</view>
      <view
        class="posit-box"
        @click="selectPositionFn"
      >
        <text class="icon-position font_family icon-position_tongyong_1" />
        <view
          class="city-name"
        >
          {{ queryParams.name }}
        </view>
        <text class="icon-goto font_family icon-a-arrowdown_tongyong_1" />
      </view>
    </view>
    <view class="btn-box">
      <button class="btn btn-boundless" :plain="false" @click="resetFn">重置</button>
      <button class="btn confirm-btn" :plain="true" @click="confirmFilterFn">确认</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Index',
  props: {
    mainQureyData: {
      type: Object,
      default: null
    },
    filterParams: {
      type: Object,
      default() {
        return {}
      }
    },
    popShowContent: {
      type: String,
      default: ''
    },
    pageType: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      productTypes: [
        {
          id: '1',
          name: '现货'
        },
        {
          id: '2',
          name: '促销'
        },
        {
          id: '3',
          name: '定制商品'
        }
      ],
      queryParams: {
        productType: {
          stockFilter: 0, // 现货-排序（0：无库存-默认"0"；1：有库存）
          promotionFilter: 0, // 促销-排序（0：非促销-默认("0")；1：促销）- 协议商品无促销筛选项
          productTagFilter: 0, //（0：协议商品/定制商品-默认"0"；1：定制商品）
        },
        priceStart: '',
        priceEnd: '',
        listCategoryId: '',
        listCategorys: {},
        listBrandIds: [],
        listBrandNames: [],
        listBrands: [],
        /*code: '',
        name: '',
        warehouseCode: ''*/
      }
    }
  },
  computed: {
    sortBrandList() {
      return this.mainQureyData ? this.mainQureyData.sortBrandList : []
    },
    listCategorys() {
      return this.mainQureyData ? this.mainQureyData.listCategorys : []
    },
  },
  watch: {
    filterParams: {
      handler(newVal) {
        this.queryParams = newVal
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    // this.queryParams = this.filterParams
  },
  methods: {
    /*价格输入框输入格式限制*/
    inputReplaceFn(key) {
      this.$nextTick(() => {
        this.queryParams[key] = this.queryParams[key].replace(/[^0-9]/g, '')
      })
    },
    /*切换筛选弹框展示内容*/
    changeIndexListFn(val) {
      this.$emit('update:popShowContent', val)
    },
    /*选择商品类型*/
    selectProductTypeFn(val) {
      if (this.queryParams.productType[val] == 1) {
        this.queryParams.productType[val] = 0
        this.syncDataFn()
        return
      }
      if (this.queryParams.productType[val] == 0) {
        this.queryParams.productType[val] = 1
        this.syncDataFn()
        return
      }
    },
    /*选择品牌*/
    selectBrandFn(val) {
      this.$nextTick(() => {
        if (this.queryParams.listBrandIds.indexOf(val.brandId) > -1) {
          this.queryParams.listBrandIds = this.splitArrFn(this.queryParams.listBrandIds, val.brandId)
          this.queryParams.listBrandNames = this.splitArrFn(this.queryParams.listBrandNames, val.brandName)
          this.queryParams.listBrands = this.splitArrFn(this.queryParams.listBrands, val.brandId, 'brandId')
          this.syncDataFn()
          return
        }
        this.queryParams.listBrandIds.push(val.brandId)
        this.queryParams.listBrandNames.push(val.brandName)
        this.queryParams.listBrands.push(val)
        this.syncDataFn()
      })
    },
    /*去掉数组元素*/
    splitArrFn(arr, id, objKey) {
      arr.forEach((item, index) => {
        if (typeof item == 'object') {
          if (item[objKey] == id) {
            arr.splice(index, 1)
          }
        } else {
          if (item == id) {
            arr.splice(index, 1)
          }
        }
      })
      return arr
    },
    /*选择分类*/
    selectCategoryFn(val) {
      if (this.queryParams.listCategoryId == val.categoryId) {
        this.queryParams.listCategoryId = ''
        this.queryParams.listCategorys = []
      } else {
        this.queryParams.listCategoryId = val.categoryId
        this.queryParams.listCategorys = val
      }
      this.syncDataFn()
    },
    /*选择地址*/
    selectPositionFn() {
      uni.navigateTo({
        url: `/productList/filterForm/selectArea?objKey=positionObj`,
      })
    },
    /*向父级组件搜索条件同步数据*/
    syncDataFn() {
      this.$emit('update:filterParams', this.queryParams)
    },
    /*筛选条件确认*/
    confirmFilterFn() {
      if (this.queryParams.priceStart > this.queryParams.priceEnd) {
        this.$u.toast('您输入的最低价大于最高价，请重新输入')
        return
      }
      this.syncDataFn()
      this.$emit('confirmFilterFn')
      this.$emit('closePopFn')
    },
    /*重置筛选*/
    resetFn() {
      const {
        name,
        code,
        warehouseCode
      } = this.vuex_nowAddress
      this.queryParams = {
        productType: {
          promotionFilter: 0, // 促销-排序（0：非促销-默认("0")；1：促销）- 协议商品无促销筛选项
          stockFilter: 0, // 现货-排序（0：无库存-默认"0"；1：有库存）
          productTagFilter: 0, //（0：协议商品/定制商品-默认"0"；1：定制商品）
        },
        priceStart: '',
        priceEnd: '',
        listCategoryId: '',
        listCategorys: {},
        listBrandIds: [],
        listBrandNames: [],
        listBrands: [],
        code: code,
        name: name,
        warehouseCode: warehouseCode
      }
      this.$emit('update:filterParams', this.queryParams)
    }
  }
}
</script>

<style lang="scss" scoped>
.class-content{
  .class-item{
    width: 158rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    padding: 0 16rpx;
    display: inline-block;
    margin:16rpx 16rpx 0rpx 0;
    overflow: hidden;
    border-radius:$uni-border-radius-default;
    background: $uni-f5bg-color;
    font-size: $uni-font-size-sm;
  }
  .class-item-select{
    width: 154rpx;
    height: 60rpx;
    line-height:60rpx;
    background: $uni-bg-color;
    border: 2rpx solid $uni-orange ;
    color: $uni-orange;
  }
  .price-inp{
    width: 260rpx;
    height: 64rpx;
    display: block;
    border-radius: 32rpx;
    border: 0;
    float: left;
    text-align: center;
    overflow: hidden;
    background: $uni-f5bg-color;
    font-size: $uni-font-size-sm;
  }
  .line{
    width: 40rpx;
    height: 2rpx;
    float: left;
    margin: 31rpx 8rpx;
    background: $uni-f5bg-color;
  }
}
.price-box{
  margin: 16rpx 0 0 2rpx;
}
.title-box{
  height: 48rpx;
  line-height: 48rpx;
  margin-top: 36rpx;
}
.posit-title{
  float: left;
  height: 48rpx;
  line-height: 48rpx;
}
.posit-box{
  float: right;
  height: 48rpx;
  margin-right: 48rpx;
  .icon-position{
    width: 32rpx;
    height: 32rpx;
    float: left;
    color: $uni-text-color-orange;
  }
  .icon-goto{
    width: 32rpx;
    height: 32rpx;
    float: left;
  }
  .city-name{
    height: 48rpx;
    line-height: 48rpx;
    float: left;
    margin: auto 8rpx;
    color: $uni-orange;
  }
  .selected-box{
    max-width: 346rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.btn-box{
  width: calc(100% - 50rpx);
  height: 80rpx;
  position: fixed;
  bottom: 40rpx;
  padding-left: 50rpx;
  .btn{
    width: 180rpx;
    height: 68rpx;
    line-height: 68rpx;
    margin: 6rpx 32rpx 0 0;
    float: left;
    font-size: $uni-font-size-lg;
  }
  .confirm-btn{
    width: 360rpx;
    border: 0;
    color: $uni-bg-color;
    background: $uni-orange;
  }
}
</style>
